.videos-box {
  background-color: #fff;
  border-radius: 48rpx;
  margin-bottom: 32rpx;

  .videos-title {
    padding: 0 36rpx;
    padding-top: 42rpx;
  }

  .index-videos {
    width: 100%;
    height: 700rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      margin-left: 36rpx;
      height: 700rpx;

      .item-body {
        position: relative;
        width: 456rpx;
        height: 600rpx;
        border-radius: 48rpx;
        color: #fff;
        box-sizing: border-box;
        padding: 36rpx 0;

        .video {
          width: 100%;
          height: 100%;
        }

        .video-time {
          position: absolute;
          padding: 8rpx 20rpx;
          bottom: 22rpx;
          right: 22rpx;
          color: #fff;
          background-color: rgba(#9CDB14, 0.36);
          font-size: 22rpx;
          border-radius: 240rpx;
        }

        .masking {
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.2);
          position: absolute;
          border-radius: 48rpx;
          left: 0;
          top: 0;
        }

        .icon {
          width: 112rpx;
          height: 112rpx;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -56rpx;
          margin-top: -56rpx;
          background-color: #fff;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.6);
        }
      }

      .item-btm {
        width: 100%;
        font-weight: 700;
        font-size: 32rpx;
        line-height: 48rpx;
        letter-spacing: -0.0033em;
        color: #666666;

        &.color-active {
          color: #333333;
        }

        .btm-icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 12rpx;
          vertical-align: middle;
        }
      }
    }
  }

}